<template>
    <div class="me-view-comment-write" v-if="commentShow">
        <div class="textarea-main">
            <el-input type="textarea" :rows="2" :placeholder="commentShow ? `@${commentObj.nikeName}` : '你的评论....'"
                v-model="blogComments.content" class="comments-center1">
            </el-input>
            <div class="comments-button">
                <el-button @click="addComments()">评论</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import articleApi from '~/api/article'
export default {
    name: 'commentInput',
    props: {
        commentShow: Boolean,
        commentObj: Object
    },
    data() {
        return {
            text: '',
            blogComments: {},
        }
    },
    methods: {
        addComments() {
            this.blogComments.articleId = this.commentObj.articleId
            this.blogComments.parentId = this.commentObj.parentId === 0 ? this.commentObj.id : this.commentObj.parentId
            this.blogComments.toUserId = this.commentObj.userId
            articleApi.addArticleComments(this.blogComments).then(res => {
                this.$message.success("发布成功！")
                this.$emit("getArticleComments")
                this.blogComments.content = null;
            })
        },
    },

}
</script>

<style scoped>
.me-view-comment-write {
    margin-top: 10px;
    margin-left: -4px;
}

.comments-center1 {
    width: 98%;
}

.comments-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.textarea-main {
    width: 100%;
    background-color: #1e1e1e;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

::v-deep .comments-center1 .el-textarea__inner {
    min-height: 80px !important;
}

::v-deep .textarea-main .el-button {
    border-color: #a31f34;
    background: #a31f34;
    color: #000;
    width: 55.6px;
    height: 31.6px;
    text-align: center !important;
    line-height: 0 !important;
    padding: 0;
    margin-right: 2%;
    margin-bottom: 10px;
}

::v-deep .textarea-main .el-button:hover {
    border-color: #be243c;
    background: #be243c;
    color: #000;
    /* box-shadow: 0 4px 3px 1px #be243c, 0 6px 8px #be243c, 0 -4px 4px #be243c, 0 -6px 4px #be243c, inset 0 0 3px 3px #be243c; */

}
</style>